<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__back iconfont" @click="handleBackClick">&#xe679;</div>
      <div class="search__content">
        <div class="search__content__icon iconfont">&#xe6e1;</div>
        <input
          class="search__content__input"
          placeholder="请输入商品名称"
          v-model="keyword"
          @change="handleSearchInputChange"
        />
      </div>
    </div>
    <router-link v-for="item in searchList" :to="`/shop/${item._id}`">
      <ShopInfo :item="item" :hideBorder="false"></ShopInfo>
    </router-link>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { get } from '@/utils/request';
import { ref } from 'vue';
import ShopInfo from '@/components/ShopInfo.vue';

// 处理返回逻辑
const useHandleBackEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  return { handleBackClick };
};

// 搜索关键词逻辑
const useSearchListEffect = () => {
  const searchList = ref([]);
  const getSearchList = async (keyword) => {
    try {
      const result = await get('/api/shop/search', {
        keyword: keyword,
      });
      console.log('result: ', result);
      if (result?.errno === 0 && result?.data?.length) {
        searchList.value = result.data;
      }
    } catch (error) {}
  };
  getSearchList();
  return { searchList, getSearchList };
};
export default {
  name: 'SearchList',
  components: {
    ShopInfo,
  },
  setup() {
    const route = useRoute();
    const keyword = ref(route.query.keyword || '');
    const { handleBackClick } = useHandleBackEffect();
    const { searchList, getSearchList } = useSearchListEffect();
    console.log('searchList: ', searchList);
    const handleSearchInputChange = () => {
      getSearchList(keyword.value);
    };
    return { keyword, searchList, handleSearchInputChange, handleBackClick };
  },
};
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  overflow-y: auto;
  @include fix-content;
  background: $darkBgColor;

  .search {
    display: flex;
    margin: 0.2rem 0 0.16rem 0;
    line-height: 0.32rem;
    &__back {
      width: 0.3rem;
      font-size: 0.24rem;
      color: #b6b6b6;
    }
    &__content {
      display: flex;
      flex: 1;
      background: $search-bgColor;
      border-radius: 0.16rem;
      &__icon {
        width: 0.44rem;
        text-align: center;
        color: $search-fontColor;
      }
      &__input {
        display: block;
        width: 100%;
        padding-right: 0.2rem;
        border: none;
        outline: none;
        background: none;
        height: 0.32rem;
        font-size: 0.14rem;
        color: $content-fontcolor;
        &::placeholder {
          color: $content-fontcolor;
        }
      }
    }
  }
}
</style>
